<template>
  <div>
    <el-dialog
      title="新增城市价格"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        ref="cityPriceForm"
        :model="cityPriceForm"
        :rules="rules"
        :inline="true"
      >
        <el-row>
          <el-form-item label="批量设置所有城市：">
            <el-radio-group v-model="cityPriceForm.isCityPriceAll">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>

        <el-row v-if="cityPriceForm.isCityPriceAll">
          <el-form-item label="统一城市价格" prop="cityPriceAll">
            <el-input
              type="number"
              v-model="cityPriceForm.cityPriceAll"
              placeholder="请输入统一城市价格"
            />
          </el-form-item>
        </el-row>
        <el-row v-else>
          <el-form-item label="统一城市价格" prop="cityPriceAll">
            <el-input
              type="number"
              v-model="cityPriceForm.cityPriceAll"
              placeholder="请输入统一城市价格"
            />
          </el-form-item>
          <el-form-item label="选择城市" prop="cityCodes">
            <el-select
              v-model="cityPriceForm.cityCodes"
              multiple
              placeholder="请选择"
              style="width: 560px"
            >
              <el-option
                v-for="(city, index) in cityList"
                :value="city.cityCode"
                :label="city.cityName"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="confirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["craftName", "craftCode", "cityList"],
  data() {
    return {
      dialogVisible: false,
      cityPriceForm: {
        // 是否批量设置城市价格
        isCityPriceAll: true,
        cityCodes: [],
        cityPriceAll: ""
      },
      rules: {
        cityPriceAll: [
          { required: true, message: "请输入统一城市价格", trigger: "blur" }
        ],
        cityCodes: [
          { required: true, message: "请选择城市", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    init() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    confirm() {
      this.$refs["cityPriceForm"].validate(valid => {
        if (valid) {
          let cityCodes = [];
          if (this.cityPriceForm.isCityPriceAll) {
            this.cityList.forEach(c => cityCodes.push(c.cityCode));
            this.$emit("func", cityCodes, this.cityPriceForm.cityPriceAll);
          } else {
            cityCodes = this.cityPriceForm.cityCodes;
            this.$emit("func", cityCodes, this.cityPriceForm.cityPriceAll);
          }
          this.dialogVisible = false;
        }
      });
    },
    removeCityCode(cityCode) {
      let index = this.cityPriceForm.cityCodes.indexOf(cityCode);
      if (index > -1) {
        this.cityPriceForm.cityCodes.splice(index, 1);
      }
    }
  },
  filters: {
    craftNameFilter: function() {
      return this.craftName + ":";
    }
  }
};
</script>

<style scoped></style>
